<template>
	<div class="share-page">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item>订单管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/abnormal' }">短信催收</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="abnormal-page">
			<div class="desc">
        <div class="left">
          <div class="name">短信催收说明：</div>
          <div class="list">
            <div class="item">1. 功能上线后会每个运营商赠送100条短信，使用完后，需要自行购买次数，短信0.05元/条。</div>
            <div class="item">2. 超过24小时未支付的订单（仅限在乐汇园官方小程序中购买的，不包含第三方对接），会自动发送短信给消费者，每个订单只会发送一次短信。</div>
            <div class="item">3. 订单未支付时间从消费者可以支付时间算，即正常订单等识别结果出来24小时后，异常订单等运营商处理完且消费者无异议24小时后。</div>
            <div class="item">4. 此功能上线后产生的订单才会发送催收短信，之前的订单仍需要运营商自行和消费者协商处理。</div>
          </div>
        </div>
        <div class="right">
          <div class="">
            <span>剩余短信条数：</span>
            <span class="num">100条</span>
            <el-button round color="#0000ff" @click="onRecharge()">充值</el-button>
          </div>
          <div class="tem">
            <el-button round color="#0071bb" @click="onChangeTemplate()">更换短信模板</el-button>
          </div>
        </div>
      </div>
			<div class="content">
        <div class="left">
          <div class="name-title">短信催收发送</div>
          <!-- 搜索条件 -->
          <el-form style="width:100%;display:flex;justify-content: space-evenly;flex-wrap: wrap;">
            <el-form-item label="订单日期">
              <el-date-picker  type="date" placeholder="请输入订单日期" style="width: 140px;" :suffix-icon="CaretBottom" />
            </el-form-item>
            <el-form-item label="订单号">
              <el-input placeholder="请输入订单号" style="width:120px"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input placeholder="请输入用户手机号码" style="width:120px"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button round :icon="Search" color="#0071bb">查询</el-button>
					    <el-button round :icon="RefreshLeft">重置</el-button>
            </el-form-item>
          </el-form>
          <!-- 表格数据 -->
			    <div class="tables">
				    <el-table :data="tableData" style="" :row-class-name="tableRowClassName">
				    	<el-table-column type="selection" v-model="whole" />
				    	<el-table-column prop="id" label="序号" width="80px" />
				    	<el-table-column prop="order_time" label="订单日期" />
				    	<el-table-column prop="order_no" label="订单号" />
				    	<el-table-column prop="tel" label="手机号码" />
				    </el-table>
            <div class="send">
              <el-button round  color="#0071bb">发送</el-button>
            </div>
            <!-- 底部分页 -->
		        <div class="page_number">
		        	<el-pagination v-model:current-page="pager.currentPage" v-model:page-size="pager.pageSize" 
		        		:disabled="!pager.total"  layout="prev, pager, next, jumper,total" :total="pager.total"
		        		@size-change="handleSizeChange" @current-change="handleCurrentChange"/>
		        </div>
			    </div>
        </div>
        <div class="right">
          <div class="name-title">短信发送记录</div>
          <!-- 搜索条件 -->
          <el-form style="width:100%;display:flex;justify-content: space-evenly;flex-wrap: wrap;">
            <el-form-item label="订单日期">
              <el-date-picker  type="time" style="width:140px" placeholder="请输入订单日期"  :suffix-icon="CaretBottom" />
            </el-form-item>
            <el-form-item label="订单号">
              <el-input placeholder="请输入订单号" style="width:120px"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input placeholder="请输入用户手机号码" style="width:120px"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button round :icon="Search" color="#0071bb">查询</el-button>
					    <el-button round :icon="RefreshLeft">重置</el-button>
            </el-form-item>
          </el-form>
          <!-- 表格数据 -->
			    <div class="tables">
				    <el-table :data="tableData" style="" :row-class-name="tableRowClassName">
				    	<el-table-column type="selection" v-model="whole" />
				    	<el-table-column prop="id" label="序号" width="80px" />
				    	<el-table-column prop="order_time" label="订单日期" />
				    	<el-table-column prop="order_no" label="订单号" />
				    	<el-table-column prop="tel" label="手机号码" />
				    </el-table>
            <div class="send">
              <el-button round  color="#0071bb">发送</el-button>
            </div>
            <!-- 底部分页 -->
		        <div class="page_number">
		        	<el-pagination v-model:current-page="pager.currentPage" v-model:page-size="pager.pageSize" 
		        		:disabled="!pager.total"  layout="prev, pager, next, jumper,total" :total="pager.total"
		        		@size-change="handleSizeChange" @current-change="handleCurrentChange"/>
		        </div>
			    </div>
        </div>
      </div>
		</div>
    <!-- 短信充值 -->
    <MessageRecharge v-if="showRecharge" @close="onCloseRecharge()" @submit="onSubmitRecharge()"></MessageRecharge>
    <!-- 短信模板 -->
    <MessageTemplate v-if="showTemplate" @close="onCloseTemplate()" @submit="onSubmitTemplate()"></MessageTemplate>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { CaretBottom, Refresh, HelpFilled, Search, RefreshLeft } from '@element-plus/icons-vue'
  import MessageRecharge from './components/messageRecharge.vue'
  import MessageTemplate from './components/messageTemplate.vue'
	const activeIndex = ref("1");
	const choiceIndex = ref("");
	const whole = ref(false)
	const tableData = [
		{
			id: '1',
			order_time: '2024-05-15——12:22:20',
			order_no: '20214115425225',
      tel:'13306236880'
		},
    {
			id: '2',
			order_time: '2024-05-15——12:22:20',
			order_no: '20214115425225',
      tel:'13306236880'
		},
    {
			id: '3',
			order_time: '2024-05-15——12:22:20',
			order_no: '20214115425225',
      tel:'13306236880'
		},
	]
  // 分页
const pager = ref({
	currentPage:1,
	pageSize:10,
	total:10,
})
// 改变pageSize
const handleSizeChange = (val : number) => {
	console.log(`${val} items per page`)
}
// 改变当前页码 currentPage
const handleCurrentChange = (val : number) => {
	console.log(`current page: ${val}`)
}
const showRecharge = ref(false)
// 打开弹窗
const onRecharge= () => {
  showRecharge.value = true
}
// 提交
const onSubmitRecharge = () => {
	showRecharge.value = false
}
// 关闭
const onCloseRecharge = () => {
	showRecharge.value = false
}
const showTemplate= ref(false)
// 打开弹窗
const onChangeTemplate = () => {
  showTemplate.value = true
}
// 提交
const onSubmitTemplate = () => {
	showTemplate.value = false
}
// 关闭
const onCloseTemplate = () => {
	showTemplate.value = false
}
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any
  rowIndex: number
}) => {
  return 'blue-tr'
}
</script>

<style lang="scss" scoped>
	.abnormal-page {
		background-color: #fff;
		margin-top: 10px;
		padding: 10px;

		.title {
			font-size: 16px;
		}
    .desc{
      display:flex;
      justify-content:space-between;
      background-color:#00ffff;
      padding:10px 20px;
      color:#808080;
      .name{
        color:#4D4D4D;
      }
      .list{
        font-size:12px;
        .item{
          margin-bottom:4px;
        }
      }
      .left{
        display:flex;
      }
      .right{
        align-self:flex-end;
        .num{
          font-size:20px;
          color:#4D4D4D;
          margin-right:14px;
        }
        .tem{
          text-align:right;
          margin-top:10px;
        }
      }
    }

		.content{
      display:flex;
      margin-top:20px;
      .left,.right{
        flex:1;
      }
      .right{
        margin-left:20px;
      }
    }
    .name-title{
      width: 100%;
      text-align: left;
      margin-bottom: 10px;
      color: #4D4D4D;
      padding: 0 10px;
    }

		.btn-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 20px;
		}
    .send{
      width: 100%;
      text-align: right;
      margin-top: 20px;
      padding: 0 20px;
      box-sizing: border-box;
    }
		.tables {
			margin-top: 20px;
      background: #00ffff;
			.check-text {
				color: #0071bb;
				cursor: pointer;
			}
			.handle {
				color: #2686c5;
			}
			.abnormal {
				color: #ff4141;
			}
		}
	}

</style>
<style>
  .blue-tr{
    background: #00ffff !important;
  }
</style>